{% extends "shuup/admin/base.jinja" %}
{% from "shuup/admin/macros/general.jinja" import content_with_sidebar, content_block %}

{% block body_class %}shuup-details{% endblock %}
{% block content %}
    {% call content_with_sidebar(content_id="product_form") %}
        <form method="post" id="product_form" novalidate>
            {% if orderability_errors %}
                {# TODO: FIX THIS FOR MOBILE SCREEN SIZES #}
                <p class="alert alert-info"
                data-toggle="tooltip"
                data-title="{% for error in orderability_errors %}{{ error }} {% endfor %}"
                data-placement="bottom">
                    <i class="fa fa-info-circle text-info"></i> {% trans %}This product is currently not orderable.{% endtrans %}
                </p>
            {% endif %}
            {% csrf_token %}
            {% call content_block(_("Basic Information"), "fa-info-circle", id="basic-information-section") %}
                {% for form_def in form.form_defs.values() %}
                    {% if form_def.required %}
                        {% include form_def.template_name with context %}
                    {% endif %}
                {% endfor %}
            {% endcall %}
            {% for form_def in form.form_defs.values() %}
                {% if not form_def.required %}
                    {% include form_def.template_name with context %}
                {% endif %}
            {% endfor %}
            {% for product_section in product_sections %}
                {% call content_block(product_section.name, product_section.icon) %}
                    {% include product_section.template with context %}
                {% endcall %}
            {% endfor %}
        </form>
    {% endcall %}
{% endblock %}
{% block extra_js %}
    <script src="{{ shuup_static("shuup_admin/js/product.js") }}"></script>
    <script>
        function saveAsACopy(){
            $("#product_form").attr("action", "{{ url('shuup_admin:shop_product.new') }}").submit();
        }

        (function() {
            if($(".has-error").length) {
                var $elem = $(".has-error:first");
                $elem.closest(".content-wrap").addClass("in");
                $('html, body').animate({
                    scrollTop: $elem.offset().top - $("#top-header").height() - 50
                }, 100);
            }
        })();
        $(document).ready(function() {
            var steps = [];
            steps.push({
                title: "{% trans %}Add a new product{% endtrans %}",
                icon: "{{ static('shuup_admin/img/product.png') }}",
                helpPage: "products.html",
                classes: 'has-icon has-help-button',
                text: [
                    "{% trans %}You are adding a product.{% endtrans %}",
                    "{% trans %}To make it stand out, give it an awesome description and picture. This is what will help your shoppers learn about your products. It will also help shoppers find them in the store and on the web.{% endtrans %}",
                    "{% trans %}You can set its price or size and many other things in the option boxes for each product.{% endtrans %}"
                ],
                scrollTo: false,
            });
            if ($("a[href='#basic-information-section']").length > 0) {
                steps.push({
                    title: "{% trans %}Basic Information{% endtrans %}",
                    text: ["{% trans %}All the required product information.{% endtrans %}"],
                    attachTo: "a[href='#basic-information-section'] left",
                    scrollTo: false,
                });
            }
            if ($("a[href='#additional-details-section']").length > 0) {
                steps.push({
                    title: "{% trans %}Additional Details{% endtrans %}",
                    text: ["{% trans %}Product features such as size, weight and keywords are located here.{% endtrans %}"],
                    attachTo: "a[href='#additional-details-section'] left",
                    scrollTo: false,
                });
            }
            if ($("a[href='#manufacturer-section']").length > 0) {
                steps.push({
                    title: "{% trans %}Manufacturer{% endtrans %}",
                    text: ["{% trans %}If you know the product manufacturer, it can be set here.{% endtrans %}"],
                    attachTo: "a[href='#manufacturer-section'] left",
                    scrollTo: false,
                });
            }
            if ($("a[href*='-additional-section']").length > 0) {
                steps.push({
                    title: "{% trans %}Additional Information{% endtrans %}",
                    text: ["{% trans %}Strictly shop related information. For example set the minimum price applicable in this shop.{% endtrans %}"],
                    attachTo: "a[href*='-additional-section'] left",
                    scrollTo: false,
                });
            }
            if ($("a[href='#product-media-section']").length > 0) {
                steps.push({
                    title: "{% trans %}Product Files{% endtrans %}",
                    text: ["{% trans %}You can attach files such as manual to the merchandise(s) here.{% endtrans %}"],
                    attachTo: "a[href='#product-media-section'] left",
                    scrollTo: false,
                });
            }
            if ($("a[href='#product-images-section']").length > 0) {
                steps.push({
                    title: "{% trans %}Images{% endtrans %}",
                    text: ["{% trans %}Showcase your merchandise here.{% endtrans %}"],
                    attachTo: "a[href='#product-images-section'] bottom",
                    scrollTo: false,
                });
            }
            if ($("a[href='#contact-group-pricing-section']").length > 0) {
                steps.push({
                    title: "{% trans %}Contact Group Pricing{% endtrans %}",
                    text: ["{% trans %}Set specific prices for your customer segments such as loyalty, tier status or season here.{% endtrans %}"],
                    attachTo: "a[href='#contact-group-pricing-section'] bottom",
                    scrollTo: false,
                });
            }
            if ($("a[href='#contact-group-discount-section']").length > 0) {
                steps.push({
                    title: "{% trans %}Contact Group Discounts{% endtrans %}",
                    text: ["{% trans %}Here you can set individual discount amounts for different contact groups. " +
                    "The discount amount may be visible on storefront. These groups are defined in{% endtrans %}"],
                    attachTo: "a[href='#contact-group-discount-section'] bottom",
                    scrollTo: false,
                });
            }
            window.tourConfig = {
                tourComplete: ("{{ tour_complete }}" == "True" ? true : false),
                tourKey: "{{ tour_key }}",
                url: ShuupAdminConfig.browserUrls.tour,
                initialSteps: steps
            };
        });
    </script>
    {% for product_section in product_sections %}
        {% if product_section.extra_js %}
            {% include product_section.extra_js with context %}
        {% endif %}
    {% endfor %}
{% endblock %}
